<template>
  <div class="mul-learn-case">
    <el-button  class="back" type="text" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
    <!-- 顶部导航 -->
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>学情分析</el-breadcrumb-item>
        <el-breadcrumb-item>批量学情分析</el-breadcrumb-item>
      </el-breadcrumb>
      
      <div class="filters">
        <!-- 学生选项框 -->
        <el-select
          v-model="selectedStudents"
          multiple
          placeholder="选择学生"
          style="width: 200px"
          @change="handleStudentChange"
        >
          <el-option
            v-for="student in allStudents"
            :key="student.id"
            :label="student.name"
            :value="student"
          ></el-option>
        </el-select>

        <!-- 学科选项框 -->
        <el-select
          v-model="selectedSubject"
          placeholder="选择学科"
          style="width: 200px"
          @change="handleSubjectChange"
        >
          <el-option
            v-for="subject in availableSubjects"
            :key="subject"
            :label="subject"
            :value="subject"
          ></el-option>
        </el-select>
      </div>

      <el-button type="primary" @click="exportData">导出</el-button>
    </div>

    <!-- 学生成绩趋势图 -->
    <div class="content">
      <div class="chart-section">
        <el-radio-group v-model="chartType" @change="loadChart">
          <el-radio-button value="考试">考试</el-radio-button>
          <el-radio-button value="练习">练习</el-radio-button>
        </el-radio-group>
        <div id="chart" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { exportStudentAnalysis } from "@/api/exportService";
export default {
  name: "MulLearnCase",
  data() {
    return {
      allStudents: [], // 所有选中的学生数据
      selectedStudents: [], // 当前选中的学生
      availableSubjects: [], // 当前选中学生的学科列表
      selectedSubject: null, // 当前选中的学科
      chartType: "考试", // 当前图表类型
      chartData: [], // 图表数据
    };
  },
  mounted() {
    // 获取路由传递的选中学生数据
    this.selectedStudents = this.$route.params.students || [];
    console.log("路由参数:", this.$route.params.students);
    console.log("选中的学生数据:", this.selectedStudents);
    
    this.selectedStudents = [...this.allStudents]; // 默认全选
    this.updateAvailableSubjects(); // 更新学科列表
    this.loadChart(); // 加载图表数据
  },
  methods: {
    goBack() {
      this.$router.push({ name: "Analysis" }); // 返回上一页
    },
    handleStudentChange() {
      this.updateAvailableSubjects(); // 学生变化时更新学科列表
      this.loadChart(); // 重新加载图表
    },
    handleSubjectChange() {
      this.loadChart(); // 学科变化时重新加载图表
    },
    updateAvailableSubjects() {
      // 根据选中的学生更新学科列表
      const subjectsSet = new Set();
      this.selectedStudents.forEach((student) => {
        student.subjects.forEach((subject) => subjectsSet.add(subject));
      });
      this.availableSubjects = Array.from(subjectsSet);
      if (!this.availableSubjects.includes(this.selectedSubject)) {
        this.selectedSubject = null; // 如果当前选中的学科不在新列表中，重置
      }
    },
    async loadChart() {
      try {
        const studentIds = this.selectedStudents.map((student) => student.id);
        const response = await fetchAnalysisData(
          studentIds,
          this.selectedSubject,
          this.chartType
        );
        this.chartData = response.data.chartData;
        console.log("图表数据:", this.chartData);
        // 在这里加载图表，例如使用 ECharts
      } catch (error) {
        console.error("加载图表数据失败:", error);
      }
    },
    async exportData() {
      try {
        // 将选中学生和学科数据保存到本地
        const content = JSON.stringify(
          {
            students: this.selectedStudents,
            subject: this.selectedSubject,
            chartType: this.chartType,
          },
          null,
          2
        );
        const blob = new Blob([content], { type: "application/json" });
        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        link.download = `批量学情数据.json`;
        link.click();

        // 将数据发送到后端存储
        const response = await exportStudentAnalysis({
          studentIds: this.selectedStudents.map((student) => student.id),
          subject: this.selectedSubject,
          chartType: this.chartType,
        });

        if (response.status === 200) {
          this.$message.success("批量学情数据已成功导出并存储到后端！");
        }
      } catch (error) {
        console.error("导出数据失败:", error);
        this.$message.error("导出数据失败，请稍后重试！");
      }
    },
  },
  watch: {
    chartType() {
      this.loadChart(); // 切换图表类型时重新加载图表
    },
  },
};
</script>

<style scoped>
.mul-learn-case {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 60px; /* 导航栏高度 */
}
.back {
  color: #409eff;
  font-size: 16px;
 position: absolute;
  top: 6px;
  left: 15px;
  bottom: auto;
  margin-top: 60px; /* 导航栏高度 */
  z-index: 1000; /* 确保按钮在最上层 */
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.content {
  flex: 1;
  padding: 20px;
}

.chart-section {
  margin-top: 20px;
}

.chart {
  width: 100%;
  height: 400px;
  background-color: #f0f0f0;
}
</style>